<template>
	<view class="content">
    <view class="home-drop" id="target">
      <image src="/static/image/main.png" mode="scaleToFill" class="home-drop_img"></image>
    </view>
    <view class="home-content">
      <view class="cell-item-box">
        <view class="cell border-bottom">
          <view class="cell__title">￥<text style="font-size: 40rpx;margin-left: 10rpx;">98.00</text></view>
          <view class="cell__value u-text-right">
            <text class="iconfont icon-zhuanfa cell__value-icon u-m-r-32"></text>
            <text class="iconfont icon-shoucang cell__value-icon"></text>
            </view>
          <view class="cell__icon-wrap"></view>
        </view>
        <view class="cell border-bottom">
          <view class="cell__top-title">超萌卡通公仔毛绒玩具</view>
        </view>
        <view class="cell border-bottom">
          <view class="cell__title">商品介绍促销语</view>
          <view class="cell__value"></view>
          <view class="cell__icon-wrap"></view>
        </view>
        <view class="cell border-bottom">
          <view class="cell__title u-flex-1">
            <text class="cell_r u-m-r-10">库存</text>
            <text>99</text>
          </view>
          <view class="cell__title u-flex-1 u-text-center">
            <text class="cell_r u-m-r-10">运费</text>
            <text>￥2.2</text>
          </view>
          <view class="cell__title u-flex-1 u-text-right">
            <text class="cell_r u-m-r-10">销量</text>
            <text>1000+</text>
          </view>
        </view>
        <view class="cell border-bottom">
          <view class="cell__title">积分抵扣现金最多40%</view>
          <view class="cell__value"></view>
          <view class="cell__icon-wrap"></view>
        </view>
        <view class="cell border-bottom">
          <view class="cell__title">购买可得20积分</view>
        </view>
        <view class="cell border-bottom" @click="dropdownShow = true">
          <view class="cell__title">领劵</view>
          <view class="cell__title border">10元优惠券</view>
          <view class="cell__icon-wrap u-flex-1 u-text-right"><u-icon name="arrow-right" color="#999" size="28"></u-icon></view>
        </view>
        <view class="cell border-bottom" @click="specificationShow = true">
          <view class="cell__title">选择规格</view>
          <view class="cell__value u-m-l-32">已选择&nbsp;规格1/规格3</view>
          <view class="cell__icon-wrap u-flex-1 u-text-right"><u-icon name="arrow-right" color="#999" size="28"></u-icon></view>
        </view>
        <view class="cell border-bottom">
          <view class="cell__title">配送方式</view>
          <view class="cell__value u-m-l-32">顺丰</view>
        </view>
      </view>
      <view class="cell-item-box u-m-t-16">
        <view class="cell border-bottom">
          <view class="cell__title">评价</view>
          <view class="cell__value">（0）</view>
        </view>
      </view>
      <view class="cell-item-box u-m-t-16">
      <view class="cell">
        <view class="cell__title">商品详情</view>
      </view>
      <view class=" u-p-l-32 u-p-r-32">
        <image src="/static/image/bg2.png" mode="widthFix" class="img"></image>
      </view>
      <view style="height: 200rpx;"></view>
    </view>
    </view>
    <view class="shop-btn">
      <view class="shop-btn_l" @click="ShoppingCart">
        <view class="shop-btn_img">
          <text class="iconfont icon-gouwuche shop-btn_icon"></text>
          <u-badge type="error" count="7" :offset="[-12,-20]" class="shop-badge"></u-badge>
        </view>
      </view>
      <view class="shop-btn_r signup" @click="OrderNow">立即下单</view>
    </view>
    <Specification
      v-model="specificationShow" 
      mode="center" 
      width="80%" 
      :closeable="true" 
      close-icon-pos="center"
      :mask-close-able="false"
      :list="list">
    </Specification>
    <u-popup v-model="dropdownShow" 
    mode="bottom" 
    length="60%" 
    :mask-close-able="false"
    :safe-area-inset-bottom="true">
      <view class="coupon">
        <view class="coupon-header">店铺优惠券</view>
        <view style="height: 120rpx;"></view>
        <view class="u-p-l-32 u-p-r-32">
          <view class="list"
          :class="item.isActive ? 'list-item__black': 'list_active_red'" 
          v-for="(item,index) in Data" 
          :key="index">
            <view class="list-item">
              <view class="list-item__container container--right">
                <view class="list-item__header">
                  <view class="list-item__icon">￥<text class="list-item__price">{{item.price}}</text> </view>
                </view>
                <view class="list-item__content">
                  <text class="list-item__content-title">{{item.title}}</text>
                  <text class="list-item__content-note">{{item.time}}</text>
                </view>
                <block v-if="item.isActive === false">
                  <view class="list-item__extra" @click="get(index)">
                    <view class="list-item__extra-text_t">立即领取</view>
                  </view>
                </block>
                <block v-else>
                  <view class="list-item__extra">
                    <view class="list-item__extra-text_t">已领取</view>
                    <view class="list-item__extra-text_b" @click="MyGift()">查看详情</view>
                  </view>
                </block>
              </view>
            </view>
          </view>
        </view>
      </view>
      <view style="height: 120rpx;"></view>
      <view class="s-btn s-btn--primary s-size-default" @click="dropdownShow = false;">关闭</view>
    </u-popup>
  </view>
</template>

<script>
  import Specification from '@/components/Specification/Specification.vue';
	export default {
    components:{
    	Specification,
    },
		data() {
			return {
        list: [{
        		label: '规格1',
        		active: true,
        	},
        	{
        		label: '规格2',
        		active: false,
        	},
        ],
        specificationShow:false,
        dropdownShow:false,
        Data:[{
          price:10,
          title:'满250使用(限领一张)',
          time:'有效期至2023.12.30 23:59',
          isActive:false,
        },{
          price:20,
          title:'满500使用(限领一张)',
          time:'有效期至2023.12.30 23:59',
          isActive:false,
        }],
        Height:'',
			}
		},
    
		onLoad(options) {
		  uni.setNavigationBarTitle({
		    title: options.Name
		  });
		  this.Name = options.Name
		},
		methods: {
      OrderNow(){
        uni.navigateTo({
        	url: '/pages/Mall/OrderInfo/OrderInfo'
        });
      },
      ShoppingCart(){
        uni.navigateTo({
        	url: '/pages/Mall/ShoppingCart/ShoppingCart'
        });
      },
      MyGift(){
        uni.navigateTo({
        	url: '/pages/Index/MyGift/MyGift'
        });
      },
      get(index){
        this.Data[index].isActive = true
      },
		}
	}
</script>

<style lang="scss" scoped>
  .img{
    width: 100%;
    height: 100%;
  }
	.content {
    .home-drop{
      width: 100%;
      height: 720rpx;
			position: fixed;
			z-index: 1;
      .home-drop_img{
        width: 100%;
        height: 100%;
      }
    }
    .home-content{
      width: 100%;
      background-color: #ffffff;
      border-top-left-radius: 28rpx;
      border-top-right-radius: 28rpx;
      position: absolute;
      z-index: 10;
      top: 720rpx;
      margin-top: -40rpx;
      padding-top: 40rpx;
    }
    .cell-item-box{
      background-color: #fff;
      .cell{
        display: flex;
        flex-direction: row;
        align-items: center;
        position: relative;
        box-sizing: border-box;
        width: 100%;
        padding: 24rpx 32rpx;
        line-height: 27px;
        background-color: #fff;
        text-align: left;
        .cell__top-title{
          font-size: 36rpx;
        }
        .cell__title{
          font-size: 24rpx;
          width: auto;
          text{
            font-size: 24rpx;
          }
        }
        .cell__value{
          overflow: hidden;
          // text-align: right;
          vertical-align: middle;
          flex: 1;
          font-size: 24rpx;
          .cell__value-icon{
            font-size: 48rpx;
            color: #303133;
          }
        }
        .cell__icon-wrap{
          margin-left: 10rpx;
        }
      }
    }
    .border{
      padding: 0 24rpx;
      border: 2rpx solid $supernut-cikir_red;
      position: relative;
      margin-left: 32rpx;
    }
    // 添加伪元素
    .border::before,
    .border::after {
        position: absolute;
        top: 50%;
        margin-top: -10rpx;
        content: '';
        width: 18rpx;
        height: 18rpx;
        background-color: #fff;
        border: 1px solid $supernut-cikir_red;
        border-left-color: transparent;
        border-bottom-color: transparent;
        border-radius: 50%;
    }

    .border::before {
        left: -12rpx;
        transform: rotate(45deg);
    }

    .border::after {
        right: -12rpx;
        transform: rotate(-135deg);
    }
    .border-bottom::after{
        content: " ";
        position: absolute;
        left: 0;
        top: 0;
        pointer-events: none;
        box-sizing: border-box;
        -webkit-transform-origin: 0 0;
        transform-origin: 0 0;
        width: 199.8%;
        height: 199.7%;
        -webkit-transform: scale(.5);
        transform: scale(.5);
        border: 0 solid #e4e7ed;
        z-index: 2;
    }
    .border-bottom::after {
      border-bottom-width: 2rpx;
    }
	}
  .coupon{
    .coupon-header{
      width: 100%;
      position: fixed;
      top: 0rpx;
      z-index: 99;
      font-size: 40rpx;
      color: #fa5251;
      text-align: center;
      padding: 32rpx 0;
      border-bottom: 4rpx solid #e4e7ed;
      background-color: #ffffff;
    }
    .list{
      background-color: #f3f3f3;
      margin-top: 24rpx;
      border-radius: 28rpx;
      color: #fff;
      
      .list-item{
        display: flex;
        font-size: 32rpx;
        position: relative;
        justify-content: space-between;
        align-items: center;
        flex-direction: row;
        cursor: pointer;
        .list-item__container{
          position: relative;
          display: flex;
          flex-direction: row;
          flex: 1;
          overflow: hidden;
          .list-item__header {
            display: flex;
            flex-direction: row;
            align-items: center;
            padding: 32rpx 0 32rpx 32rpx;
            .list-item__icon{
              margin-right: 36rpx;
              flex-direction: row;
              justify-content: center;
              align-items: center;
              font-size: 24rpx;
              .list-item__price{
                font-size: 36rpx;
              }
            }
          }
          .list-item__content{
            display: flex;
            padding-right: 16rpx;
            flex: 1;
            flex-direction: column;
            justify-content: space-between;
            overflow: hidden;
            padding: 32rpx 0;
            .list-item__content-title{
              font-size: 28rpx;
              overflow: hidden;
            }
            .list-item__content-note{
              margin-top: 6rpx;
              font-size: 24rpx;
              overflow: hidden;
            }
          }
          .list-item__content--center{
            justify-content: center;
          }
          .list-item__extra{
            width: 160rpx;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            padding:0 16rpx;
            margin: 16rpx 0;
            border-left:2rpx dashed #fff;
            .list-item__extra-text_t{
              font-size: 28rpx;
            }
            .list-item__extra-text_b{
              font-size: 24rpx;
            }
          }
        }
      }
    }
    .list_active_red{
      background-color: #fa5251
    }
    .list_active_blue{
      background-color: #5257fb
    }
    .list-item__black{
      background-color: #f3f3f3;
      color: #303133;
      .list-item__extra{
        border-left:2rpx dashed #303133 !important;
      }
    }
  }
  
</style>
